<script setup lang="ts">
import Taro from "@tarojs/taro";
import styles from "./list.less";
import { AtSearchBar } from "taro-ui-vue3";
import { reactive, ref } from "vue";
import CardItem from "@/components/CardItem/cardItem.vue";

const searchValue = ref();

const state = reactive({
  list: [1, 2, 3, 4, 5],
});

const fetchListData = () => {
  Taro.showLoading({
    title: "加载中",
  });
  setTimeout(() => {
    const current = [...state.list];
    state.list = current.concat([1, 2, 3, 4, 5]);
    Taro.hideLoading();
  }, 1500);
};

const listenScrollToLower = () => {
  console.log(23);

  fetchListData();
};
</script>

<template>
  <view :class="styles.listWrapper">
    <AtSearchBar :value="searchValue" />
    <scroll-view
      :scrollY="true"
      :style="{
        height: '80vh',
      }"
      @scrolltolower="listenScrollToLower"
    >
      <block v-for="item in state.list">
        <CardItem />
      </block>
    </scroll-view>
  </view>
</template>
